<style lang="scss" scoped>
@import '../../styles/common/loading.less';
.container{
    border: none !important;
    margin-top: 4px;
}
.el-col-offset-1 {
    margin-left: 0%;
}
.button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

}
.col_a {
    margin-left: 2%;
}
.el-card {
    height: 200px;
}

.el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
}
</style>
<template>
    <div  class="common-background-color"
          v-loading="loading"
          element-loading-text="loading......"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="width:98%;height:85%;margin: 36px 12px;margin-right: 50px;">
            <el-collapse v-model="activeNames" >
              <el-collapse-item title="基础信息"  name="1">
                  <el-form :model="prpLPayee" class="info-submit-form" style="width: 99%;line-height: 22px;">
                      <el-row type="flex">
                          <el-col :span="8" >
                              <el-form-item label="业务单号">
                                  <el-input v-model="prpLPayee.businessNo"  disabled></el-input>
                              </el-form-item>
                          </el-col>
                          <el-col :span="8" >
                              <el-form-item label="赔付类型">
                                  <el-input v-model="prpLPayee.paymentTypeName"  disabled></el-input>
                              </el-form-item>
                          </el-col>
                          <el-col :span="8" >
                              <el-form-item label="支付金额">
                                  <el-input v-model="prpLPayee.payAmount"  disabled></el-input>
                              </el-form-item>
                          </el-col>
                      </el-row>
                      <el-row type="flex">
                          <el-col :span="8" >
                              <el-form-item label="退票原因">
                                  <el-input v-model="prpLPayee.refundReason"  disabled></el-input>
                              </el-form-item>
                          </el-col>
                      </el-row>
                  </el-form>
              </el-collapse-item>
            </el-collapse>
            <el-collapse  v-model="activeNames" >
                <el-collapse-item title="账号信息"  name="2">
                    <el-form ref="prpLPayee" :model="prpLPayee" :rules="rulesPayee" class="info-submit-form" style="width: 99%;line-height: 22px;">
                        <el-row type="flex">
                            <el-col :span="8">
                                <el-form-item label="领款人姓名" prop="payeeName" :required="false">
                                    <el-input  v-model="prpLPayee.payeeName"  placeholder=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"  >
                                <el-form-item label="支付对象" >
                                    <el-input disabled  v-model="prpLPayee.payObjectName"  placeholder=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="联系电话">
                                    <el-input   v-model="prpLPayee.phone"  placeholder=""></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex">
                            <el-col :span="8"  >
                                <el-form-item label="证件类型" >
                                      <el-select  placeholder="请选择" v-model="prpLPayee.identifyType" >
                                        <el-option
                                          v-for="item in identifyTypeList"
                                          :key="item.codeCode"
                                          :label="item.codeCName"
                                          :value="item.codeCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="证件号码">
                                    <el-input v-model="prpLPayee.identifyNo"   placeholder=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="收款银行大类"  prop="bankBroad" :required="false">
                                    <el-select placeholder="请选择" v-model="prpLPayee.bankBroad" @change="changeBankBroad">
                                        <el-option
                                        v-for="item in bankBroadList"
                                        :key="item.directCode"
                                        :label="item.directName"
                                        :value="item.directCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex">
                            <el-col :span="8" >
                                <el-form-item label="开户行省"  prop="province">
                                    <el-select placeholder="请选择省份" v-model="selectProvince" filterable size="mini"  @change="selectProvinceFun($event)" >
                                        <el-option value="" label="请选择"></el-option>
                                        <el-option :value="item" :label="item.label" v-for="(item, index) in provinceList" :key="index"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"  >
                                <el-form-item label="开户行市" prop="area">
                                    <el-select placeholder="请选择城市" v-model="selectCity" filterable size="mini" @change="selectCityFun($event)" >
                                        <el-option value="" label="请选择"></el-option>
                                        <el-option :value="item" :label="item.label" v-for="(item, index) in cityList" :key="index"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="开户行区/县"   prop="city">
                                    <el-select placeholder="请选择区县" v-model="selectDistrict" filterable size="mini" v-bind:disabled="isAble02"  @change="selectDistrictFun($event)" >
                                        <el-option value="" label="请选择"></el-option>
                                        <el-option :value="item" :label="item.label" v-for="(item, index) in districtList" :key="index"></el-option>
                                  </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex">
                            <el-col :span="8">
                                <el-form-item label="开户银行">
                                    <el-select placeholder="请选择" v-bind:disabled="isAble" v-model="prpLPayee.bankCode"  @change="changeBankInfo" >
                                          <el-option
                                          v-for="item in bankInfoList"
                                          :key="item.bankCode"
                                          :label="item.bankName"
                                          :value="item.bankCode">
                                          </el-option>
                                      </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="对公对私" prop="bankToPubPri"  :required="false">
                                    <el-select  placeholder="请选择" v-model="prpLPayee.bankToPubPri" >
                                        <el-option
                                          v-for="item in pubPriList"
                                          :key="item.codeCode"
                                          :label="item.codeCName"
                                          :value="item.codeCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="账号"  prop="bankNo" :required="false">
                                    <el-input v-model="prpLPayee.bankNo" placeholder=""></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex">
                          <el-col :span="8"  >
                            <el-form-item label="银行地址" prop="bankAddress" :required="false">
                              <el-input   v-model="prpLPayee.bankAddress"  placeholder=""></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8" >
                            <el-form-item label="赔款金额">
                              <el-input disabled v-model="prpLPayee.payAmount"    placeholder=""></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8" >
                            <el-form-item label="赔款摘要" prop="remark"  :required="false">
                              <el-input v-model="prpLPayee.remark"     placeholder=""></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                    </el-form>
                </el-collapse-item>
            </el-collapse>
            <el-collapse v-model="activeNames">
                <el-collapse-item title="历史轨迹" name="3">
                    <div style="background-color:#FFF;">
                        <el-table
                          :data="prpLClaimOpinionRecordDTOList"
                          class="table"
                          ref="multipleTable"
                          header-cell-class-name="table-header"
                        >
                            <el-table-column prop="handlerCode" label="审核人工号" align="center"></el-table-column>
                            <el-table-column prop="handlerName" label="审核人姓名" align="center"></el-table-column>
                            <el-table-column prop="auditOpinion" :formatter="formatTaskState" label="审核状态" align="center"></el-table-column>
                            <el-table-column prop="remark" label="备注" align="center"></el-table-column>
                            <el-table-column prop="handlTime" label="审核时间" align="center"></el-table-column>
                        </el-table>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <!-- <div style="margin: 40px;padding-bottom: 50px;margin-left: 35%;">
            <el-button type="primary" size="medium"  v-if="(this.taskState==='01' || this.taskState==='04')" style=" background-color:rgba(255, 138, 0, 1);
            border-color:rgba(255, 138, 0, 1);">重置</el-button>
            <el-button type="success" size="medium" v-if="(this.taskState==='01' || this.taskState==='04')" v-on:click="onSubmit" style=" background-color:rgba(255, 138, 0, 1);
            border-color:rgba(255, 138, 0, 1);">提交</el-button>
            <el-button type="info" size="medium" @click="handleClose" style=" background-color:rgba(255, 138, 0, 1);
            border-color:rgba(255, 138, 0, 1);">关闭</el-button>
        </div> -->
        <div style="margin-top: 25px;text-align: center;height: 70px">
            <el-button type="primary"  size="medium" style="width: 9%" v-if="(this.taskState==='01' || this.taskState==='04')" @click="onSubmit">提交</el-button>
            <el-button type="primary"  size="medium" style="width: 9%" @click="handleClose">关闭</el-button>
        </div>
    </div>
</template>

<script>
import{queryCodeList,queryBankClassList,queryBankInfo,queryBankRegionTree,queryRegionTree,queryRefundTicketDetail,submitRefundTicket}from '@/api/baseDate';
import Cookies from 'js-cookie';
export default {
    name: 'refundTicketDetailCache',
    data() {
        return {
            loading:false,
            isAble:false,
            isAble02:false,
            activeNames: ['1','2','3'],
            id:'',
            data:{},
            prpLPayee:{
                bankBroad:'',
                bankName:'',
                bankCode:'',
                bankProvince:'',
                bankCity:'',
                bankDistrict:'',
                bankDistrictName:'',
                bankAddress:'',
            },
            prpLClaimOpinionRecordDTOList:[],
            identifyTypeList:[],
            bankBroadList:[],
            provinceList:[],
            cityList:[],
            districtList:[],
            selectProvince: {},
            selectCity: {},
            selectDistrict: {},
            pubPriList:[ // 
                {
                    codeCode:"1",
                    codeCName:"对公",
                },
                {
                    codeCode:"2",
                    codeCName:"对私",
                }
            ],
            bankInfoList:[],
            bankType:'',
            taskState:'01',
            rulesPayee: {
                payeeName: [{ required: true, message: "必填字段", trigger: "blur" }],
                bankBroad: [{ required: true, message: "必填字段", trigger: "blur" }],
                bankAddress: [{ required: true, message: "必填字段", trigger: "blur" }],
                bankNo: [{ required: true, message: "必填字段", trigger: "blur" }],
                payAmount: [{ required: true, message: "必填字段", trigger: "blur" }],
                remark: [{ required: true, message: "必填字段", trigger: "blur" }],
                bankToPubPri: [{ required: true, message: "必填字段", trigger: "blur" }],
                paymentType: [{ required: true, message: "必填字段", trigger: "blur" }],
            },
        }
    },
    activated(){
        if(this.$route.params.taskId!=undefined){
            this.getParams();
            this.queryIdentifyTypeList();
            this.queryBankBroadList(); 
        }
    },
    created() {
        this.getParams();
        this.queryIdentifyTypeList();
        this.queryBankBroadList(); 
    },
    methods: {
        // 关闭页面
        handleClose(){
            this.closePageTo(this.$store,this.$route,this.$router,'refundTicket');
        },
        // 校验表单
        checkForm(){
            let flag = false;    
            //this.$refs.prpLPayee.validate(valid => {
            this.$refs['prpLPayee'].validate((valid) => {
                //表单验证失败
                if (!valid) {
                    flag = true;
                }
            });
            return flag;
        },
        // 提交
        onSubmit() {
            if(this.checkForm()){
                return;
            }
            this.data=this.prpLPayee;
            this.data.handlerComCode = Cookies.get("makeCom");
            this.data.handlerComName= Cookies.get("cMakeCom");
            this.data.handlerName= Cookies.get("userName");
            this.data.handlerCode= Cookies.get("userCode");
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            submitRefundTicket(this.data)
                  .then(res => {
                      this.loading = false;
                      if(res){
                        if(res.data.resultCode){
                            if(res.data.resultCode != '0000'){ 
                                // 返回失败
                                this.$message.error(res.data.resultMsg);
                            }else{
                                this.$message.success(res.data.resultMsg);
                                this.closePageTo(this.$store,this.$route,this.$router,'refundTicket');
                            }
                        }else{
                            this.$message.error('系统异常'); 
                        }
                      }else{
                        this.$message.error('系统异常'); 
                      }
                  })

        },
        getParams(){
            let taskId  = this.$route.params.taskId;
            this.id = taskId;
            this.taskState = this.$route.params.taskState;
            this.querySettleDetail();
        },
        querySettleDetail(){
            const param = {
                id: this.id,
            }
            if(param.id == undefined || param.id == null || param.id == ''){
                this.$message.error(`系统异常！`);
                return;
            }
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            queryRefundTicketDetail(param)
                .then((res)=> {
                    this.loading = false;
                    if(res){
                      if(res.data.resultCode){
                          if(res.data.resultCode != '0000'){ 
                              // 返回失败
                              this.$message.error(res.data.resultMsg);
                          }else{
                              this.prpLPayee = res.data;
                              this.selectProvince.value = this.prpLPayee.bankProvince;
                              this.prpLClaimOpinionRecordDTOList = res.data.prpLClaimOpinionRecordDTOList;
                              this.queryRegionList();
                          }
                      }else{
                          this.$message.error('系统异常'); 
                      }
                    }else{
                      this.$message.error('系统异常'); 
                    }

            });
        },
        // 查询银行信息
        querybankList(){
          let bankType = this.bankType;
          let areaCode = this.prpLPayee.bankDistrict;
          if (bankType == '' || bankType == undefined || bankType == null){
              return;
          }
          if (areaCode == '' || areaCode == undefined || areaCode == null){
              return;
          }
          const param = { 
              bankType: bankType,
              areaCode: areaCode
          }
          queryBankInfo(param).then(res=> {
              this.bankInfoList = res.data
              if(this.bankInfoList.length > 0){
                  this.isAble = false;
              }else{
                  this.isAble = true;
              }
          })
        },
        // 开户银行改变事件
        changeBankInfo(val){
            this.bankInfoList.map((item)=>{
                if(item.bankCode === val){
                    this.prpLPayee.bankName = item.bankName;
                    this.prpLPayee.bankCode = item.bankCode;
                    this.prpLPayee.bankAddress = item.bankName;
                }
            })
        },
        // 证件类型
        queryIdentifyTypeList(){
            const param = {
                codeType:'IdentifyType'
            }
            queryCodeList(param).then(res=> {
                this.identifyTypeList = res.data
            })

        },
        // 银行大类
        queryBankBroadList(){
            // const param = {
            //     codeType:'BankBigType'
            // }
            // queryCodeList(param).then(res=> {
            //     this.bankBroadList = res.data
            // })
            queryBankClassList('').then(res=> {
                this.bankBroadList = res.data

                // 回显银行信息
                this.bankBroadList.map((item)=>{
                  if(item.directCode === this.prpLPayee.bankBroad){
                      this.bankType = item.bankType;
                      if(item.isDefault === '0'){
                          this.isAble02 = false;
                          this.isAble = false;
                          this.querybankList();
                      }else{
                          this.isAble02 = true;
                          this.isAble = true;
                      }
                  }
                })
            })
        },
        // 监听银行大类改变事件
        changeBankBroad(val){
            this.bankInfoList = [];
            this.prpLPayee.bankCode = '';
            this.prpLPayee.bankAddress = '';
            this.selectDistrict = '';
            this.prpLPayee.bankDistrict = '';
            this.bankBroadList.map((item)=>{
                if(item.directCode === val){
                    this.bankType = item.bankType;
                    if(item.isDefault === '0'){
                        this.isAble02 = false;
                        this.isAble = false;
                        this.querybankList();
                    }else{
                        this.isAble02 = true;
                        this.isAble = true;
                        this.prpLPayee.bankAddress = item.bankName;
                    }
                }
            })
        },
        queryRegionList(){
            // const param = { 
            //     value:'value',
            //     lable:'label'
            // }
            
            // queryRegionTree(param).then(res=> {
            //     this.provinceList = res.data

            //     this.provinceList.map((item)=>{
            //         if(item.value === this.bankProvince){
            //             this.cityList = item.children
            //             this.selectCity.value = this.bankCity;
            //         }
            //     })
            //     this.cityList.map((item)=>{
            //         if(item.value === this.bankCity){
            //             this.districtList = item.children
            //             this.selectDistrict.value = this.bankDistrict;
            //         }
            //     })
            // })
            queryBankRegionTree('').then(res=> {
                this.provinceList = res.data

                // 回显开户行市数据
                this.provinceList.map((item)=>{
                    if(item.value === this.prpLPayee.bankProvince){
                        this.cityList = item.children
                        this.selectCity.value = this.prpLPayee.bankCity;
                    }
                })
                // 回显开户行县数据
                this.cityList.map((item)=>{
                    if(item.value === this.prpLPayee.bankCity){
                        this.districtList = item.children
                        this.selectDistrict.value = this.prpLPayee.bankDistrict;
                    }
                })
            })
            
        },
        // 省份 市 县联动
        selectProvinceFun (event) {
            console.log(event)
            if (event) {
                this.cityList = event.children
            } else {
                this.cityList = []
            }
            this.districtList = []
            this.$emit('getLawyerListInfo', [event.label, 'province'])
            this.selectDistrict = {};
            if (event.value === undefined) {
                this.prpLPayee.bankProvince = "";
            } else {
                this.prpLPayee.bankProvince = event.value;
            }

            this.bankInfoList = [];
            this.prpLPayee.bankCode = '';
            this.prpLPayee.bankAddress = '';
        },
        selectCityFun (event) {
            console.log(event)
            if (event) {
                this.districtList = event.children
            } else {
                this.districtList = []
            }
            this.$emit('getLawyerListInfo', [event.label, 'city'])
            if (event.value === undefined) {
                this.prpLPayee.bankCity = "";
            } else {
                this.prpLPayee.bankCity = event.value;
            }
            this.bankInfoList = [];
            this.prpLPayee.bankCode = '';
            this.prpLPayee.bankAddress = '';
        },
        selectDistrictFun (event) {
            console.log(event)
            this.$emit('getLawyerListInfo', [event.label, 'area'])
            if (event.value === undefined) {
                this.prpLPayee.bankDistrict = "";
                this.prpLPayee.bankDistrictName = '';
            } else {
                this.prpLPayee.bankDistrict = event.value;
                this.prpLPayee.bankDistrictName = event.label;
            }

            this.bankInfoList = [];
            this.prpLPayee.bankCode = '';
            this.prpLPayee.bankAddress = '';
            this.querybankList();
        }
    }
}
</script>